<template>
	  <view class="modal" v-if="visible">
		    <view class="modal-content">
			      <view class="modal-header">
				        <h2>报警参数配置</h2>
				        <i class="fa fa-times" @click="closeModal"></i>
				      </view>
			      <view class="modal-body" style="width: 600px;">
				     <view>
					<table style="width: 100%;">
						<tr>
							<td>EC：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
						<tr>
							<td>PH：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
						<tr>
							<td>水温：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>

						<tr>
							<td>光强度：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
						<tr>
							<td>温度：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
						<tr>
							<td>湿度：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
						<tr>
							<td>二氧化碳：</td>
							<td>下限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>上限</td>
							<td><input type="number" class="txtinput" id="temperatureLowDown" value="0" /></td>
							<td>
								<switch :checked="isCheck" @change="switch1Change" />
							</td>
							<td><button class="butset2">保存</button></td>
						</tr>
					</table>
				</view>



				   </view>


			      <view class="modal-footer">
				        <button type="button" class="but1" @click="submit">关闭配置</button>

				  <button type="button" class="but2" @click="">打开</button>
				  <button type="button" class="but2" @click="">关闭</button>

				      </view>
			    </view>
		  </view>


</template>
<script>
	export default {
		props: ['visible'],
		data() {
			return {
				isCheck: false
			}
		},
		methods: {
			closeModal() {
				this.$emit("update:visible", false);
			},
			submit() {
				console.log('执行提交操作');
				this.closeModal();
			}
		}
	}
</script>
<style lang="scss">
	.modal .txtinput {
		width: 80px;
		height: 35px;
		background-color: #b0e2a3;
		text-align: center;
	}

	.modal {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal .modal-content {

		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.modal .modal-content .modal-header {
		background-color: green;
		color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
	}

	.modal .modal-content .modal-header h2 {
		margin: 0;
	}

	.modal .modal-content .modal-header i {
		font-size: 20rpx;
		cursor: pointer;
	}

	.modal .modal-content .modal-body {
		padding: 20rpx;
	}

	.modal .modal-content .modal-footer {
		background-color: #eeeeee;
		padding: 10rpx;

		display: flex;
		justify-content: flex-end;
	}

	.modal .modal-content .modal-footer button {
		border: none;
		margin-left: 10rpx;
		margin: 10px;
		width: 100px;
		border-radius: 5rpx;
		cursor: pointer;
	}

	.modal .modal-content .modal-footer .but1 {
		background-color: green;
		color: #ffffff;
	}

	.modal .modal-content .modal-footer .but2 {
		background-color: #dddddd;
		color: #333333;
	}
</style>